<template>
  <div class="page_body">
    <HomeTop :topTitle="topTitle"></HomeTop>
    <div class="referee_order_body">
      <!-- 考试信息 -->
      <div class="referee_order_card">
        <div class="referee_order_top_item">
          <!-- <img
            class="referee_order_top_img"
            src="../../assets/image/order_top_img01.png"
            alt="封面"
          /> -->
          <img
            class="referee_order_top_img"
            src="../../assets/image/coach_enroll_logo01.png"
            alt="封面"
          />
          <div>
            <div class="referee_order_top_title">上海市篮球协会会员注册</div>
            <div class="referee_order_top_title">上海市篮球协会裁判员注册</div>
          </div>
        </div>
      </div>
      <!-- 考生信息 -->
      <div class="referee_order_card content_card">
        <div class="referee_order_tab_box">
          <div class="referee_order_tab">报名信息</div>
        </div>
        <div class="referee_order_tab_content_user">
          <div class="referee_order_tab_content_left">
            <div class="referee_order_tab_content_item">
              <div class="referee_order_tab_content_item_title">姓名：</div>
              <div class="referee_order_tab_content_item_value user_value">
                {{ orderData.name }}
              </div>
            </div>

            <div class="referee_order_tab_content_item">
              <div class="referee_order_tab_content_item_title">性别：</div>
              <div class="referee_order_tab_content_item_value user_value">
                {{ orderData.sex }}
              </div>
            </div>

            <div class="referee_order_tab_content_item">
              <div class="referee_order_tab_content_item_title">证件号：</div>
              <div class="referee_order_tab_content_item_value user_value">
                {{ orderData.identity_number }}
              </div>
            </div>
            <div class="referee_order_tab_content_item">
              <div class="referee_order_tab_content_item_title">
                注册所在地：
              </div>
              <div class="referee_order_tab_content_item_value user_value">
                {{ orderData.register_region }}
              </div>
            </div>
            <div class="referee_order_tab_content_item">
              <div class="referee_order_tab_content_item_title">
                裁判员等级：
              </div>
              <div class="referee_order_tab_content_item_value user_value">
                {{ refereeLevelFilterFn(orderData.referee_level) }}
              </div>
            </div>
          </div>
          <img
            class="referee_order_tab_content_user_img"
            :src="orderData.photo"
          />
        </div>
      </div>
      <!-- 订单信息 -->
      <div class="referee_order_card content_card" style="margin-bottom: 0">
        <div class="referee_order_tab_content_item" style="margin-top: 0.24rem">
          <div class="referee_order_tab_content_item_title">注册时间：</div>
          <div class="referee_order_tab_content_item_value">
            {{ orderData.created_at }}
          </div>
        </div>
      </div>
      <!-- 操作栏 -->
      <div class="referee_order_bottom">
        <div class="referee_order_bottom_left">
          <div class="referee_order_bottom_price_label">总金额：</div>
          <div class="referee_order_bottom_price">
            ￥{{ orderData.exam_money }}
          </div>
        </div>
        <div
          class="referee_order_bottom_right"
          v-if="orderData.order_status == 1"
        >
          <div
            class="referee_order_bottom_btn_g"
            style="margin-right: 0.06rem"
            @click="cancelBtnFn()"
          >
            取消支付
          </div>
          <div class="referee_order_bottom_btn_o" @click="payBtnFn()">
            立即支付
          </div>
        </div>
        <div
          class="referee_order_bottom_right"
          v-if="orderData.order_status == 2"
        >
          <div class="referee_order_bottom_btn_g" @click="toHome()">
            返回首页
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style
  src="../../assets/css/order/refereeRegisterOrderDetail.css"
  scoped
></style>

<script>
import HomeTop from "@/components/homeTop.vue";
import { Indicator, Toast } from "mint-ui";

export default {
  name: "RefereeRegisterOrderDetail",
  components: {
    HomeTop,
  },
  data() {
    return {
      topTitle: "订单详情", // 顶部组件参数设置
      orderId: "", // 订单Id
      orderData: {
        order_id: "",
        name: "",
        photo: "",
        country: "",
        sex: "",
        identity_number: "",
        province: "",
        city: "",
        region: "",
        political_status: "",
        created_at: "",
        exam_money: "",
        order_status: "",
      }, // 订单详细数据
      orderInterval: null,
      baseAPIUrl: this.$store.state.baseAPIUrl,
      identityNumberShow: "",
      refereeLevelList: [
        {
          value: 1,
          label: "三级",
        },
        {
          value: 2,
          label: "二级",
        },
        {
          value: 3,
          label: "一级",
        },
        {
          value: 4,
          label: "国家级",
        },
        {
          value: 5,
          label: "国际级",
        },
      ], // 裁判等级值字典
    };
  },
  created: function () {
    let query = this.$route.query;
    if (query.orderId != undefined && query.orderId != "") {
      this.orderId = query.orderId;
    }

    this.getDetailDataFn();
  },
  methods: {
    // 查询订单详情数据
    getDetailDataFn: function () {
      let that = this;
      let url = "/mobile/refereeInfoOrder";
      let data = {
        order_id: this.orderId,
      };
      this.axios
        .post(url, data)
        .then((response) => {
          if (response.code == 0) {
            that.orderData = response.order_info;
            let nub = response.order_info.identity_number;
            let be = nub.substring(0, 3);
            let af = nub.substring(nub.length - 4, nub.length);
            that.identityNumberShow = be + "***********" + af;
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },
    // 支付按钮
    payBtnFn: function () {
      let that = this;
      // let url = "/mobile/payRefereeOrder";
      let url = "/wechatpay/refereeAuditOrderJs";
      let data = {
        order_id: this.orderId,
      };
      Indicator.open("请稍等...");
      this.axios
        .post(url, data)
        .then((response) => {
          Indicator.close();
          if (response.code == 0) {
            that.payFn(response);
            // that.$router.replace({
            //   name: "OrderSuccess",
            //   query: {
            //     orderId: that.orderId,
            //     source: "refereePay",
            //   },
            // });
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },
    // 调起支付
    payFn: function (data) {
      let that = this;
      let payData = data;
      if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
          document.addEventListener(
            "WeixinJSBridgeReady",
            that.onBridgeReady(payData),
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent(
            "WeixinJSBridgeReady",
            that.onBridgeReady(payData)
          );
          document.attachEvent(
            "onWeixinJSBridgeReady",
            that.onBridgeReady(payData)
          );
        }
      } else {
        this.onBridgeReady(payData);
      }
    },
    // 微信支付
    onBridgeReady: function (payData) {
      let that = this;
      window.WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: payData.appId, //公众号ID，由商户传入
          timeStamp: payData.timeStamp, //时间戳，自1970年以来的秒数
          nonceStr: payData.nonceStr, //随机串
          package: payData.package,
          signType: payData.signType, //微信签名方式：
          paySign: payData.paySign, //微信签名
        },
        function (res) {
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            that.toSuccessFn();
          } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
            that.cancelPay();
          }
        }
      );
    },
    // 跳转至订单完成提示页
    toSuccessFn: function () {
      let that = this;
      this.$router.replace({
        name: "OrderSuccess",
        query: {
          orderId: that.orderId,
          source: "refereePay",
        },
      });
    },
    // 用户取消支付按钮
    cancelBtnFn: function () {
      let that = this;
      let url = "/mobile/cancelRefereeAuditOrder";
      let data = {
        order_id: this.orderId,
      };
      this.axios
        .post(url, data)
        .then((response) => {
          if (response.code != 0) {
            Toast({
              message: "已取消支付",
              duration: 3000,
            });
            that.$router.replace({
              name: "RefereeHome",
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 用户取消支付
    cancelPay: function () {
      let url = "/wechatpay/cancelOrderPay";
      let data = {
        order_id: this.orderId,
      };
      this.axios
        .post(url, data)
        .then((response) => {
          if (response.code != 0) {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 等级过滤
    refereeLevelFilterFn: function (val) {
      let tx = "无";
      this.refereeLevelList.forEach((item) => {
        if (item.value == Number(val)) {
          tx = item.label;
        }
      });
      return tx;
    },
    // 返回首页
    toHome: function () {
      this.$router.push({
        name: "RefereeHome",
      });
    },
  },
};
</script>
